<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>管理-管理系统</title>
	<meta name="keywords" content="管理系统">
	<meta name="description" content="管理系统">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>

<body>
<div>

	<div style="padding:20px; background-color: #F2F2F2;">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header"></div>
					<div class="archives">
						<div id="main1" style="width: 100%; height: 600px;"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>
</body>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script src="../../js/public.js" charset="utf-8"></script>
<script src="../../dist/echarts.min.js"></script>
<script src="../../js/echarts-wordcloud.min.js"></script>
<script>
	layui.use(['table', 'laydate'], function () {
		var table = layui.table;
		var $ = layui.jquery;
		var form = layui.form;
		var laydate = layui.laydate;

		// 1. 实例化对象
		var base64image=""
		var myChart = echarts.init(document.getElementById('main1'));
		var maskImage = new Image();
		maskImage.src = base64image;
		var autoRequestTimer;
		updateWordCloud();
		// 初始加载
		//autoRequestTimer = setInterval(updateWordCloud, 30000);

		function updateWordCloud() {
			function fetchDataAndUpdate() {
				$.getJSON("/realTime/query_word_num", function (data) {
					myChart.setOption({
						//backgroundColor:'#06164A',
						backgroundColor: '#fff',
						tooltip: {
							show: true
						},
						series: [{
							type: 'wordCloud',
							gridSize: 1,
							sizeRange: [12, 55],
							rotationRange: [-45, 0, 45, 90],
							maskImage: maskImage,
							textStyle: {
								normal: {
									color: function () {
										return 'rgb(' +
												Math.round(Math.random() * 255) +
												', ' + Math.round(Math.random() * 255) +
												', ' + Math.round(Math.random() * 255) + ')'
									}
								}
							},
							left: 'center',
							top: 'center',
							right: null,
							bottom: null,
							data: data.data
						}]
					});
				});
			}

			if (maskImage.complete) {
				fetchDataAndUpdate();
			} else {
				maskImage.onload = fetchDataAndUpdate;
			}
		}

		// 清理定时器
		window.onunload = function() {
			clearInterval(autoRequestTimer);
		};

	});
</script>

</html>